<template>
    <section class="form-container">
        <el-form ref="formRef" :model="formData" :rules="rules" label-width="160px" style="padding:30px 14px;">
            <el-form-item label="所属线路" prop="lineId">
                <el-select
                    v-model="formData.lineId"
                    filterable
                    placeholder="请选择"
                    style="width:50%;"
                >
                    <el-option
                        v-for="item in lineOptions"
                        :key="item.id"
                        :label="item.lineName"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="出发车场" prop="startCarParkIds">
                <div>
                  <el-button type="text" @click="selectAllStart()">全选</el-button>
                  <el-button type="text" @click="selectOppositeStart()">反选</el-button>
                </div>
                <el-checkbox-group v-model="formData.startCarParkIds">
                  <el-checkbox v-for="(item, index) in carParkOptions" :key="index" :label="item.id">
                    {{item.carParkName}}
                  </el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="到达车场" prop="endCarParkIds">
                <div>
                  <el-button type="text" @click="selectAllEnd()">全选</el-button>
                  <el-button type="text" @click="selectOppositeEnd()">反选</el-button>
                </div>
                <el-checkbox-group v-model="formData.endCarParkIds">
                  <el-checkbox v-for="(item, index) in carParkOptions" :key="index" :label="item.id">
                    {{item.carParkName}}
                  </el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item>
                <el-popconfirm :title="'确定创建线路段吗？'" @onConfirm="submitForm()">
                    <el-button slot="reference" type="primary">立即创建</el-button>
                </el-popconfirm>
            </el-form-item>
        </el-form>
    </section>
</template>

<script>
import {LineSectionApi} from '@/api/intercity/LineSectionApi'
import {CarParkApi} from '@/api/intercity/CarParkApi'
import {LineApi} from '@/api/intercity/LineApi'
import {Common} from '@/utils/common'

export default {
    name: 'batchAddLineSection',
    components: {},
    data() {
        return {
            formData: {
                lineId: '',
                startCarParkIds: [],
                endCarParkIds: [],
                sectionDistance: '',
                sectionTime: '',
                fromStartStationTime: ''
            },
            rules: {
                lineId: [
                    {required: true, message: '请选择线路', trigger: 'change'}
                ],
                startCarParkIds: [
                    {required: true, message: '请选择出发车场', trigger: 'change'}
                ],
                endCarParkIds: [
                    {required: true, message: '请选择到达车场', trigger: 'change'}
                ]
            },
            lineOptions: [],
            carParkOptions: []
        }
    },
    created() {
        this.getCarParkList()
        this.getLineList()
    },
    methods: {
        // 获取线路列表
        getLineList() {
            LineApi.getList().then((data) => {
                this.lineOptions = data
            })
        },

        // 获取车场列表
        getCarParkList() {
            CarParkApi.getList(null).then((data) => {
                this.carParkOptions = data
            })
        },

        // 提交表单
        submitForm() {
            const that = this
            that.$refs['formRef'].validate((valid) => {
                if (valid) {
                    LineSectionApi.batchAdd(that.formData).then((response) => {
                        this.$refs['formRef'].resetFields()
                    })
                }
            })
        },

        selectAllStart() {
          let that = this
          that.formData.startCarParkIds = []
          that.carParkOptions.forEach(function(item){
            that.formData.startCarParkIds.push(item.id)
          })
        },
        selectOppositeStart(){
          let that = this
          let opposite = []
          that.carParkOptions.forEach(function(item){
            if(that.formData.startCarParkIds.indexOf(item.id)==-1){
              opposite.push(item.id)
            }
          })
          that.formData.startCarParkIds = opposite;
        },
        selectAllEnd() {
          let that = this
          that.formData.endCarParkIds = []
          that.carParkOptions.forEach(function(item){
            that.formData.endCarParkIds.push(item.id)
          })
        },
        selectOppositeEnd(){
          let that = this
          let opposite = []
          that.carParkOptions.forEach(function(item){
            if(that.formData.endCarParkIds.indexOf(item.id)==-1){
              opposite.push(item.id)
            }
          })
          that.formData.endCarParkIds = opposite;
        },
    }
}
</script>
<style lang="scss" scoped>
  ::v-deep .el-checkbox-group{line-height:20px;}
</style>
